<template>
	<div class="mall_cart_goods_list">
		<ul>
			<li v-for="(item, index) in cartGoods">
				<div class="mall_cart_goods_list_item">
					<div class="mall_cart_goods_list_item_header">
						<span class="custom_checkbox" @click="selectShopsAllGoods($event, index)">
							<input type="checkbox" :name="index" :checked="cartGoods[index].checked" />
						</span>
						<router-link :to="{name:'mallShopsHome',params:{id:item.shopid}}" class="mall_cart_goods_list_item_header_shop">{{item.shop && item.shop.title}}<i class="icon--"></i></router-link>
						<div class="mall_cart_goods_list_item_header_edit">
							<a @click="editGoodsListItem($event, index, true)" v-if="!item.isEdit">编辑</a>
							<a @click="editGoodsListItem($event, index, false)" v-else>完成</a>
						</div>
					</div>
					<div class="mall_cart_goods_list_item_content" v-for="(sitem, sindex) in item.goods">
						<div class="mall_cart_goods_list_item_content_main">
							<span class="custom_checkbox" @click="selectShopsSingleGoods($event, sindex, index)">
								<input type="checkbox" :name="index" :checked="cartGoods[index].goods[sindex].checked"/>
							</span>
							<div class="mall_cart_goods_list_item_content_desc">
								<router-link :to="{name:'goodsDetail', params:{id:sitem.id, cid:sitem.cid}}" class="mall_cart_goods_list_item_content_desc_pic">
									<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="sitem.pic" />
								</router-link>
								<div class="mall_cart_goods_list_item_content_desc_info">
									<router-link :to="{name:'goodsDetail', params:{id:sitem.id, cid:sitem.cid}}" class="mall_cart_goods_list_item_content_desc_info_title">{{sitem.title}}</router-link>
									<div class="mall_cart_goods_list_item_content_desc_info_content">
										<div>￥<i>{{sitem.price}}</i><!--del>￥<i>{{sitem.originalPrice}}</i></del--><span class="sale">优惠：￥<i>{{parseFloat(sitem.originalPrice) - parseFloat(sitem.price)}}</i></span></div>
										<div><CustomNumberComponent :num="sitem.buyNum" :index="index" :sindex="sindex" @setData="setData" @getSelectedGoods="getSelectedGoods" /></div>
									</div>
								</div>
							</div>
						</div>
						<div class="mall_cart_goods_list_item_content_tools" v-if="item.isEdit">
							<a @click="favGoodsListItem($event, index, sindex)" class="mall_cart_goods_list_item_content_tools_fav">收藏</a>
							<a @click="delGoodsListItem($event, index, sindex)" class="mall_cart_goods_list_item_content_tools_del">删除</a>
						</div>
					</div>
				</div>
			</li>
			<li v-if="cartGoods.length < 1" class="cart_no_goods">暂无商品...</li>
		</ul>
	</div>
</template>
<script>
	export default{
		name:"MallCartGoodsList",
		props:["cartGoods", "selectAllGoods"],
		data:function(){
			return {
				buyGoods:[]
			}
		},
		mounted:function(){
			//this.$set(this, "buyGoods", this.cartGoods);
		},
		components:{
			CustomNumberComponent:r => require.ensure([], () => r(require('../../components/mall/custom-number')), 'CustomNumberComponent'),
			LazyImg:r => require.ensure([], () => r(require('../../components/common/lazy-img')), 'LazyImg')
		},
		methods:{
			favGoodsListItem: function(e, id, sid){

			},
			delGoodsListItem: function(e, id, sid){
				let arr = [].concat(this.cartGoods);
				arr[id].goods.splice(sid, 1);
				arr[id].goods.length<1 && arr.splice(id, 1);
				this.$emit("setCartGoods", arr);
				this.$store.commit("setCartGoods", arr);
			},
			editGoodsListItem: function(e, id, bool){
				let arr = [].concat(this.cartGoods);
				arr[id].isEdit = bool;
				this.$emit("setCartGoods", arr);
				this.$store.commit("setCartGoods", arr);
			},
			getSelectedGoods: function(bool){
				let sg = [], n =0, p=0, sa = 0;
				this.cartGoods.each((i, item) => {
					if (item.checked){
						sa+=1;
						sg.push(item);
						n+=item.goods.length;
						item.goods.each((i, t) => {
							p+=parseFloat(t.price)*parseInt(t.buyNum);
						});
					}else{
						let g = [];
						item.goods.each((i, sitem) => {
							if (sitem.checked){
								g.push(sitem);
								n+=1;
								p+=parseFloat(sitem.price)*parseInt(sitem.buyNum);
							}
						});
						g.length > 0 && sg.push(extend(extend({}, item), {
							goods: g
						}));
					}
				});
				this.$emit("setBuyGoods", sg, n, p, sa < this.cartGoods.length ? false : true, bool);
			},
			setData: function(n, v){
				isFunction(n) ? n(this) : this.$set(this, n, v);
			},
			selectShopsAllGoods(e, index){
				let that = this;
				let bool = this.cartGoods[index].checked === true ? false : true;
				this.cartGoods[index].checked = bool;
				this.cartGoods[index].goods.each((i, item) => {
					that.cartGoods[index].goods[i].checked = bool;
				});
				this.$store.commit("setCartGoods", this.cartGoods);
				this.getSelectedGoods(false)
			},
			selectShopsSingleGoods(e, sid, id){
				let bool = this.cartGoods[id].goods[sid].checked === true ? false : true;
				if (bool && this.cartGoods[id].goods.length === 1){
					this.cartGoods[id].goods[sid].checked = bool;
					this.cartGoods[id].checked = bool;
				}else if (bool){
					this.cartGoods[id].goods[sid].checked = bool;
					let c = 0;
					this.cartGoods[id].goods.each((i, item) => {
						if (item.checked === !bool){
							c+=1;
						}
					});
					this.cartGoods[id].checked = c===0 ? bool : !bool;
				}else{
					this.cartGoods[id].goods[sid].checked = bool;
					this.cartGoods[id].checked = bool;
				}
				this.$store.commit("setCartGoods", this.cartGoods);
				this.getSelectedGoods(true)
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.mall_cart_goods_list{
		margin:80/@base 0 0;
		/*input,button,select,textarea{outline:none}
		textarea{resize:none}
		input{
			background:none;
			border:0;
			-webkit-appearance: none;
		}*/
		ul{
			li{
				&.cart_no_goods{
					padding:20/@base;
					text-align: center;
					color:#ccc;
					font-size: 22/@base;
				}
				div{
					&.mall_cart_goods_list_item{
						margin:20/@base 0 0;
						div{
							&.mall_cart_goods_list_item_header{
								background-color: #fff;
								padding:10/@base 20/@base;
								display: flex;
								span{
									&.custom_checkbox{
										width:7%;
										/*input{
											width:25/@base;
											height:25/@base;
											border-radius: 25/@base;
											border:5/@base solid #efefef;
											overflow: hidden;
											&:checked{
											    outline: none;
											    border:5/@base solid #000;
											    background-color: #ff0000;
											}
										}*/
									}
								}
								.mall_cart_goods_list_item_header_edit{
									width:23%;
									a{
										color:#000;
										font-size:20/@base;
										text-align: right;
										display: block;
									}
								}
								a{
									&.mall_cart_goods_list_item_header_shop{
										width:70%;
										color:#000;
										font-size: 20/@base;
										i{
											font-size: 14/@base;
											margin-left:10/@base;
										}
									}
								}
							}
							&.mall_cart_goods_list_item_content{
								padding:10/@base 0 0;
								.mall_cart_goods_list_item_content_main{
									display: flex;
									padding:10/@base 20/@base;
									background-color: #fff;
									span{
										&.custom_checkbox{
											width:7%;
											/*input{
												width:25/@base;
												height:25/@base;
												border-radius: 25/@base;
												border:5/@base solid #efefef;
												overflow: hidden;
												&:checked{
												    outline: none;
												    border:5/@base solid #000;
												    background-color: #ff0000;
												}
											}*/
										}
									}
									div{
										&.mall_cart_goods_list_item_content_desc{
											width:93%;
											display: flex;
											margin:0 10/@base 0 0;
											a{
												&.mall_cart_goods_list_item_content_desc_pic{
													color:#000;
													width:30%;
													display: block;
													margin-right:10/@base;
													span{
														display: block;
														img{
															width: 100%;
														}
													}
												}
											}
											div{
												&.mall_cart_goods_list_item_content_desc_info{
													a{
														&.mall_cart_goods_list_item_content_desc_info_title{
															font-size:18/@base;
															color:#000;
															display: block;
															height:50/@base;
															overflow: hidden;
														}
													}
													div{
														&.mall_cart_goods_list_item_content_desc_info_content{
															margin:10/@base 0 0;
															div{
																&:first-child{
																	font-size:18/@base;
																	color:#ff0000;
																	font-weight: 700;
																	span{
																		&.sale{
																			margin:0 0 0 20/@base;
																			color:#ccc;
																			font-weight: 400;
																		}
																	}
																	i{
																		font-style: normal;
																	}
																}
															}
														}
													}
												}
											}
										}
									}									
								}
								.mall_cart_goods_list_item_content_tools{
									display: flex;
									a{
										width:50%;
										text-align: center;
										padding:10/@base 0;
										font-size: 20/@base;
										&:first-child{
											background-color:#efefef;
										}
										&:last-child{
											background-color:#ff0000;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>